<!-- 一期所有样式和js都写入到html中 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui,viewport-fit=cover"
    />
    <title>逗学教育</title>
    <link rel="stylesheet" href="../../common/css/vant.css" />
    <link rel="stylesheet" href="../../common/css/common.css" />

    <!-- 引入choose、recommend组件样式 -->
    <link rel="stylesheet" href="../../widget/components/choose/index.css" />
    <link rel="stylesheet" href="../../widget/components/recommend/index.css" />
    <link rel="stylesheet" href="../../widget/components/tabbar/index.css" />
    <style>
      /*
			页面的所有css，必须有页面前缀
			如首页，则所有css以 .index- 开头
         */
      .header-to-my {
        position: absolute;
        top: 50%;
        right: 0.32rem;
        height: 0.5rem;
        line-height: 0.5rem;
        padding: 0 0.1rem;
        transform: translateY(-50%);
        color: rgba(222, 42, 32, 1);
        border: 1px solid rgba(222, 42, 32, 1);
        border-radius: 0.1rem;
      }
      .excellent-courses-title {
        height: 1rem;
        font-size: 0.3rem;
        line-height: 1rem;
        text-align: center;
      }

      .excellent-courses-sort {
        height: 1rem;
        margin-bottom: 0.24rem;
        padding: 0 0.3rem 0 0.62rem;
        font-size: 0.32rem;
        background-color: #fff;
      }

      .excellent-courses-common {
        margin-right: 0.3rem;
      }

      .excellent-courses-items {
        padding: 0.32rem 0.29rem 0;
        background-color: #fff;
      }

      .my-recomment-container {
        background-color: #fff;
      }

      .excellent-courses-price {
        position: relative;
      }

      .excellent-courses-price {
        position: relative;
      }

      .excellent-courses-price::before {
        content: '';
        position: absolute;
        top: 0;
        right: -0.22rem;
        border: 0.1rem solid transparent;
        border-bottom: 0.09rem solid rgb(0, 0, 0, 0.2);
      }

      .excellent-courses-price::after {
        content: '';
        position: absolute;
        bottom: -0.06rem;
        right: -0.22rem;
        border: 0.1rem solid transparent;
        border-top: 0.09rem solid rgb(0, 0, 0, 0.2);
      }

      .excellent-courses-screen-upword::before {
        border-bottom: 0.09rem solid rgba(222, 42, 32, 1);
      }

      .excellent-courses-screen-down::after {
        border-top: 0.09rem solid rgba(222, 42, 32, 1);
      }

      /* 排序激活的样式 */
      .excellent-courses-active {
        color: rgba(222, 42, 32, 1);
      }

      /* 筛选样式 */
      .excellent-courses-screen {
        width: 1.2rem;
      }
      .excellent-courses-screen-active {
        color: rgba(222, 42, 32, 1);
      }
      .van-icon-filter-o {
        font-size: 0.35rem;
      }
      .excellent-courses-filter {
        margin-left: 0.1rem;
        vertical-align: 0.05rem;
      }
      .excellent-courses-filter-active {
        color: rgba(222, 42, 32, 1);
      }

      /* 右边弹出层样式 */
      .van-popup--right {
        width: 4.88rem;
        height: 100%;
      }

      .topic-bottom-placeholder {
        height: 1rem;
      }
      .van-overlay,
      .van-popup {
        position: absolute;
      }

      /* 无课程的样式 */
      .excellent-courses-no {
        text-align: center;
      }
      .excellent-courses-no img {
        width: 50%;
      }
      .excellent-courses-n-desc {
        text-align: center;
        font-size: 0.32rem;
        color: rgb(100, 100, 100);
      }
    </style>
  </head>

  <body>
    <div id="app" v-cloak>
      <!-- ************************ 头 *************************** -->
      <div class="page-top">
        <div class="page-top">
          <div class="flex-wrap flex-justify-between flex-center-wrap header">
            <div class="header-row" @click="goBack"></div>
            <div class="flex header-title">选课中心</div>
            <div class="header-right"></div>
            <div class="header-to-my" @click="goToMy">我的课程</div>
          </div>
        </div>
      </div>
      <!-- ************************* 内容 *********************** -->
      <div class="page-content">
        <div class="placeholder"></div>
        <!-- loading页面 （没有加载完时用这张图片代替）-->
        <div v-if="isShowZLLoading" class="zl-loading">
          <img
            class="zl-loading-img"
            src="../../common/image/white.png"
            alt=""
          />
        </div>
        <!-- 章节练习主页面 -->
        <div v-if="popIsShow"></div>
        <div v-else class="excellent-courses-container">
          <div
            class="flex-wrap flex-justify-between flex-center-wrap excellent-courses-sort"
          >
            <div
              class="excellent-courses-common"
              :class="{'excellent-courses-active':selectActive[0]}"
            >
              <span @click.self="sort([1,0,0],0)">综合</span>
            </div>
            <div
              class="excellent-courses-common"
              :class="{'excellent-courses-active':selectActive[1]}"
            >
              <span @click.self="sort([0,1,0],1)">热度</span>
            </div>
            <div
              class="excellent-courses-common"
              :class="{'excellent-courses-active':selectActive[2]}"
            >
              <span
                class="excellent-courses-price"
                :class="{'excellent-courses-screen-upword':screenUpword,'excellent-courses-screen-down':screenDown}"
                @click="price"
                >价格</span
              >
            </div>
            <div
              class="excellent-courses-screen"
              :class="{'excellent-courses-screen-active':screenActive}"
              @click="screen"
            >
              <van-icon
                name="filter-o"
                :class="{'excellent-courses-filter-active': isFilter}"
              ></van-icon
              ><span
                class="excellent-courses-filter"
                :class="{'excellent-courses-filter-active': isFilter}"
                >筛选</span
              >
            </div>
          </div>
          <div v-if="courseData.length>0" class="excellent-courses-items">
            <zl-recommend
              v-for="(item,index) of courseData"
              :key="index"
              :recommend-data="item"
              @click.native="goToDetails(item.courseid)"
            >
            </zl-recommend>
          </div>
          <div v-else>
            <div class="excellent-courses-no">
              <img src="./image/excellentCourses/noCourse.png" alt="" />
            </div>
            <p class="excellent-courses-n-desc">还未上传课程 敬请期待~</p>
          </div>
        </div>
        <div class="topic-bottom-placeholder"></div>
      </div>

      <!-- 右侧弹出层 -->
      <div v-if="popIsShow">
        <van-popup
          v-model="popIsShow"
          position="right"
          @click-overlay="closep"
          :close-on-click-overlay="clickClosePop"
        >
          <zl-choose
            :pop-is-show="popIsShow"
            :is-show-replay-btn="isShowReplayBtn"
            :unlimited="true"
            @change-area="changeArea"
            @change-subject="changeSubject"
            @close-pop="closePop"
            @can-click-close="canClickClosePop"
          >
          </zl-choose>
        </van-popup>
      </div>
      <!-- 脚 -->
      <div class="page-bottom">
        <zl-tabbar :arr="[0,1,0]"></zl-tabbar>
      </div>
    </div>

    <script src="../../common/js/common.js"></script>
    <script src="../../common/js/vue.min.js"></script>
    <!-- <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> -->
    <script src="../../common/js/vant.min.js"></script>
    <script src="../../common/js/http.js"></script>
    <script src="../../widget/service/exam.service.js"></script>
    <script src="../../widget/service/course.service.js"></script>
    <!-- 引入choose组件 -->
    <script src="../../widget/components/choose/index.js"></script>
    <!-- 引入recommend 组件 -->
    <script src="../../widget/components/recommend/index.js"></script>
    <script src="../../widget/components/tabbar/index.js"></script>
    <script>
      // 注册 Lazyload 组件
      Vue.use(vant.Lazyload)
      // 注册 Popup 组件
      Vue.use(vant.Popup)
      // 注册 Layout 组件
      Vue.use(vant.Row).use(vant.Col)
      // 注册 Button 组件
      Vue.use(vant.Button)
      // 注册 Toast 组件
      Vue.use(vant.Toast)
      Vue.use(vant.Icon)

      new Vue({
        el: '#app',
        components: {
          'zl-choose': choose,
          'zl-recommend': recommend,
          'zl-tabbar': tabbar
        },
        data: {
          industryId: Number,
          addrissid: Number,
          cateid: Number,
          // 改变排序按钮激活样式
          screenActive: false,
          selectActive: [1, 0, 0],
          // 改变价格排序样式
          screenUpword: false,
          screenDown: false,
          // 用来判断子组件是否含重置按钮
          isShowReplayBtn: true,
          // 用来判断弹出层是否显示
          popIsShow: true,
          clickClosePop: false,
          // 课程数据
          courseData: [],
          // 排序方式 0：默认 1：热度 2：价格
          sortstyle: 0,
          // 排序参数 0：顺序 1：倒序
          sorttype: 0,
          isFilter: false,
          isShowZLLoading: true
        },
        computed: {},
        methods: {
          // 返回按钮事件
          goBack() {
            window.history.back(-1)
          },
          // 子组件传来的所选地区名
          changeArea(data) {},
          // 子组件传来的所选科目名
          changeSubject(data) {},
          // 弹出层按钮确认事件
          closePop(data) {
            const { subjectData, areaData, industryId } = data
            this.industryId = industryId
            try {
              let subject, area
              if (areaData) {
                area = JSON.parse(areaData)
                this.addressid = area.id
                if (area.id === 0) {
                  this.isFilter = false
                } else {
                  this.isFilter = true
                }
              }
              if (subjectData) {
                subject = JSON.parse(subjectData)
                if (subject.id) {
                  // 是不限地区下面的科目，则id为数组  不论是数字还是数组都转为字符串
                  if (subject.ismul) {
                    this.cateid = subject.id.join()
                  } else {
                    this.cateid = String(subject.id)
                  }
                } else {
                  this.cateid = 0
                }
              }
              this.popIsShow = false
              this.getInfo()
            } catch (err) {
              this.popIsShow = true
            }
          },
          closep() {
            if (this.clickClosePop === true) {
              this.isShowZLLoading = false
            }
          },
          // 更换科目按钮
          showPop() {
            this.popIsShow = true
            this.isShowZLLoading = true
          },
          canClickClosePop(data) {
            this.clickClosePop = data
          },
          // 三个排序按钮事件 0为综合排序 1为热度排序
          sort(arr, type) {
            this.selectActive = arr
            this.screenUpword = false
            this.screenDown = false
            if (type === 0) {
              this.sortstyle = 0
            }
            if (type === 1) {
              this.sortstyle = 1
            }
            this.getInfo()
          },
          price() {
            this.selectActive = [0, 0, 1]
            this.sortstyle = 2
            if (this.screenDown) {
              this.screenUpword = true
              this.screenDown = false
              this.sorttype = 0
              this.getInfo()
            } else {
              this.screenUpword = false
              this.screenDown = true
              this.sorttype = 1
              this.getInfo()
            }
          },
          // 筛选按钮事件
          screen() {
            this.popIsShow = true
            this.isShowZLLoading = true
          },
          getInfo() {
            const cateObj = {
              majorid: this.industryId,
              addressid: this.addressid,
              cateid: this.cateid,
              sortstyle: this.sortstyle,
              sorttype: this.sorttype
            }
            // 请求信息
            courseService.getCourseIndex(cateObj).then(res => {
              this.courseData = res
              this.isShowZLLoading = false
            })
          },
          goToDetails(courseid) {
            location.href = `./videoCourse.html?courseid=${courseid}`
          },
          goToMy() {
            location.href = '../personCenter/my.html'
          }
        },
        created() {
          // 判断以前是否选了地区科目
          const { subjectData, areaData, industryId } = getLStorageObj([
            'subjectData',
            'areaData',
            'industryId'
          ])
          this.industryId = industryId
          let subject, area
          if (areaData && subjectData && industryId) {
            if (areaData) {
              area = JSON.parse(areaData)
              this.addressid = area.id
              if (area.id === 0) {
                this.isFilter = false
              } else {
                this.isFilter = true
              }
            }
            if (subjectData) {
              subject = JSON.parse(subjectData)
              if (subject.ismul) {
                this.cateid = subject.id.join()
              } else {
                this.cateid = String(subject.id)
              }
              // if (subject.id) {
              //   this.cateid = subject.id
              // } else {
              //   this.cateid = 0
              // }
            }
            this.popIsShow = false
            this.getInfo()
          } else {
            // 第一次进来不用选择，直接加载专升本下的不限、不限
            // this.popIsShow = true
            this.popIsShow = false
            // 现在默认专升本（id：2）
            this.industryId = 2
            this.addressid = 0
            this.cateid = 0
            this.getInfo()
          }
        }
      })
    </script>
  </body>
</html>
